<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="margin:13px 0;">
                <el-button type="primary" @click="addCount()">新增菜单</el-button>
                <el-button type="success" @click="editCount()">修改菜单</el-button>
                <el-button type="danger" @click="delCount()">删除菜单</el-button>
            </div>
            <el-table :data="tableData" border stripe class="table" @selection-change="handleSelectionChange" v-bind:istrue="!istrue" ref="multipleTable">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column prop="functionOrder" align="center" label="模块序号">
                </el-table-column>
                <el-table-column prop="functionName" align="center" label="模块名称">
                </el-table-column>
                <el-table-column prop="icon" align="center" label="图标">
                </el-table-column>
                <el-table-column prop="url" align="center" label="模块地址">
                </el-table-column>
                <el-table-column prop="pathIcon" align="center" label="首页图标">
                </el-table-column>
                <el-table-column prop="bgColor" align="center" label="背景颜色">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size">
                </el-pagination>
            </div>
        </div>

        <!-- 新增菜单弹出框 -->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%;">
            <el-form :model="form"  ref="Form" label-width="80px" style="border: 1px solid #EBEEF5;padding: 18px;overflow: hidden;" :rules="rules">
                <el-form-item label="模块序号" class="limit-width" prop="funcOrder">
                    <el-input v-model="form.funcOrder"></el-input>
                </el-form-item>
                <el-form-item label="模块名称" class="limit-width" prop="funcName">
                    <el-input v-model="form.funcName"></el-input>
                </el-form-item>

                <el-form-item label="模块地址" class="limit-width" prop="funcUrl">
                    <el-input v-model="form.funcUrl"></el-input>
                </el-form-item>
                <el-form-item label="首页图标" class="limit-width" prop="funcPathIcon">
                    <el-input v-model="form.funcPathIcon"></el-input>
                </el-form-item>
                <el-form-item label="背景颜色" class="limit-width" prop="funcBgColor">
                    <el-input v-model="form.funcBgColor"></el-input>
                </el-form-item>
                <el-form-item label="图标" class="limit-width" prop="funcIcon">
                    <el-input v-model="form.funcIcon"></el-input>
                </el-form-item>

                <el-form-item label="备注" style="margin-right: 10%;" class="limit-width">
                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MenuManagement",
        data() {
            return {
                istrue:false,
                bgColor:require('../../../assets/img/login-bg.jpg'),
                tableData: [
                    {
                        pathIcon:'23',
                        functionOrder: '1',
                        functionName: '一级菜单',
                        icon: '333',
                        url: "主教学楼/3层",
                        bgColor:'red',
                        remark:'21'
                    },
                    {
                        pathIcon:'23',
                        functionOrder: '1',
                        functionName: '二级菜单',
                        icon: '333',
                        url: "主教学楼/3层/30室",
                        bgColor:'green',
                        remark:'21'
                    }
                ],
                cur_page: 1,
                page_size: 10,
                page_total: 1,
                multipleSelection: [],
                diologTitle: '新增菜单',
                delVisible: false,
                addVisible: false,
                isEditInfo: false,
                form: {
                    funcPathIcon:'',
                    funcName: '',
                    funcOrder: '',
                    funcIcon: '',
                    funcUrl: '',
                    funcBgColor:'',
                    remark: ''
                },
                rules: {
                    // funcPathIcon: [{required: true, message: '请输入', trigger: 'blur'}],
                    // funcOrder: [{required: true, message: '请输入', trigger: 'blur'}],
                    // funcName: [{required: true, message: '请输入', trigger: 'blur'}],
                    // funcIcon: [{required: true, message: '请输入', trigger: 'blur'}],
                    // funcUrl: [{required: true, message: '请输入', trigger: 'blur'}],
                    // funcBgColor: [{required: true, message: '请输入', trigger: 'blur'}],
                }
            }
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            //选中当前行
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
                if(this.multipleSelection.length > 0 && this.multipleSelection.length <=1){
                    this.istrue = true;
                    console.log(this.multipleSelection.length)
                }else{
                    this.istrue = false;
                    console.log(this.multipleSelection.length)
                }
                console.log(this.istrue)


            },
            // 获取数据以及分页
            getData() {
                countManger({
                    pageNum: this.cur_page,
                    pageSize: this.page_size
                }).then((res) => {
                    // console.log(res)
                    this.tableData = res.list;
                    this.page_total = res.total;
                    // console.log(JSON.stringify(this.tableData))
                })
            },
            // 保存
            save() {
                // alert(123)
                if(this.formValidate(this.form)){
                    //新增
                    if (this.multipleSelection.length > 0 && this.multipleSelection.length <= 1) {
                        addDiction({
                            'pid':this.multipleSelection[0].pid,
                            //     'id':this.multipleSelection[0].id,
                            pathIcon:this.form.funcPathIcon,
                            functionOrder: this.form.funcOrder,
                            functionName: this.form.funcName,
                            icon:this.form.funcIcon,
                            url: this.form.funcUrl,
                            bgColor:this.form.funcBgColor,
                            remark:this.form.remark
                        }).then((res) => {
                            console.log(this.form)
                            if (res.success) {
                                console.log(res)
                                this.addVisible = false;
                                this.$message.success(`添加成功`);
                                this.getData();
                            } else {
                                this.$message.error(res.message);
                            }
                        })
                    }
                else{
                        addDiction({
                            // 'pid':this.multipleSelection[0].pid,
                            //  'id':this.multipleSelection[0].id,
                            pathIcon:this.form.funcPathIcon,
                            functionOrder: this.form.funcOrder,
                            functionName: this.form.funcName,
                            icon:this.form.funcIcon,
                            url: this.form.funcUrl,
                            bgColor:this.form.funcBgColor,
                            remark:this.form.remark
                        }).then((res) => {
                            if (res.success){
                                this.addVisible=false;
                                this.$message.success(`新增成功`);
                                this.getData();
                            } else{
                                this.$message.error('新增失败')
                            }
                        })
                    }
                }
            },
            // 确定删除接口
            deleteRow() {
                var delCountId = new Array();
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    delCountId.push(this.multipleSelection[i].id)
                }
                console.log(delCountId);
                delCountManger({
                    ids: delCountId
                }).then((res) => {
                    console.log(res)
                    if (res.success) {
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    } else {
                        this.$message.error(res.message)
                    }
                })

            },
            //点击新增弹出框
            addCount() {
                this.addVisible = true;
                this.isEditInfo = false;
                this.diologTitle = '新增菜单';
                this.form = {
                    funcPathIcon:'',
                    funcName: '',
                    funcOrder: '',
                    funcIcon: '',
                    funcUrl: '',
                    funcBgColor:'',
                    remark: ''
                };
            },
            //点击修改
            editCount() {
                if (this.multipleSelection.length < 1) {
                    this.$message.error('请选择需要修改的菜单');
                } else if (this.multipleSelection.length == 1) {
                    this.diologTitle = '修改菜单';
                    this.addVisible = true;
                    this.isEditInfo = true;
                    this.form ={
                        pid: this.multipleSelection[0].pid,
                        funcPathIcon:this.multipleSelection[0].pathIcon,
                        funcName:this.multipleSelection[0].functionName,
                        funcOrder:this.multipleSelection[0].functionOrder,
                        funcIcon: this.multipleSelection[0].icon,
                        funcUrl: this.multipleSelection[0].url,
                        funcBgColor:this.multipleSelection[0].bgColor,
                        remark: this.multipleSelection[0].remark
                    }
                } else {
                    this.$message.error('一次只能修改一个菜单');
                }
            },
            //点击删除
            delCount() {
                if (this.multipleSelection.length < 1) {
                    this.$message.error('请选择需要删除的菜单');
                } else {
                    this.delVisible = true;
                }
            },
            //验证
            formValidate(formname){
                    if(!formname.funcOrder){
                        this.$message.error('请输入模块序号');
                        return false;
                    }
                    if(!formname.funcName){
                        this.$message.error('请输入模块名称');
                        return false;
                    }
                    if(!formname.funcUrl){
                        this.$message.error('请输入模块地址');
                        return false;
                    }
                    if(!formname.funcPathIcon){
                        this.$message.error('请输入首页icon');
                        return false;
                    }
                    if(!formname.funcBgColor){
                        this.$message.error('请输入背景颜色');
                        return false;
                    }
                    if(!formname.funcIcon){
                        this.$message.error('请输入图标');
                        return false;
                    }
            }
        }
    }
</script>

<style scoped>
.limit-width{
    width: 45%;
    float: left;
    margin-left: 18px;

}
</style>